import React from 'react';
import ReactDOM from 'react-dom';
import { Nav, NavItem, Tab, Row, Col } from 'react-bootstrap';

import ExeBatch from './ExeBatch';
// import DataBalance from './DataBalance';
import BusinessBalance from './BusinessBalance';
// import Statistical from './Statistical';

import './index.less';

class UploadData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      key: 1,
      // needLoad: false, // 解决 g2 图表数据加载问题
    };
    this.handleSelect = this.handleSelect.bind(this);
    // this.handleEntered = this.handleEntered.bind(this);
  }

  handleSelect(key) {
    this.setState({
      key,
    });
  }

  /*handleEntered() {
    this.setState({
      needLoad: true,
    });
  }*/

  render() {
    return (
      <Tab.Container
        defaultActiveKey={1}
        id="upload_data_main"
        activeKey={this.state.key}
        onSelect={this.handleSelect}
      >
        <Row className="clearfix">
          <Col sm={12}>
            <Nav bsStyle="tabs">
              <NavItem eventKey={1}>执行批次</NavItem>
              {/*<NavItem eventKey={2}>数据量对账</NavItem>*/}
              <NavItem eventKey={3}>业务量对账</NavItem>
              {/*<NavItem eventKey={4}>统计结果</NavItem>*/}
            </Nav>
          </Col>
          <Col sm={12}>
            <Tab.Content animation>
              <Tab.Pane eventKey={1}><ExeBatch /></Tab.Pane>
              {/*<Tab.Pane eventKey={2}><DataBalance /></Tab.Pane>*/}
              <Tab.Pane eventKey={3}><BusinessBalance /></Tab.Pane>
              {/*<Tab.Pane eventKey={4} onEntered={this.handleEntered}>
                <Statistical needLoad={this.state.needLoad} />
              </Tab.Pane>*/}
            </Tab.Content>
          </Col>
        </Row>
      </Tab.Container>
    );
  }
}


ReactDOM.render(
  <UploadData />,
  document.getElementById('app'),
);
